<template>
    <el-dialog title="新增车辆信息" v-model="dialogVisible" width="45%" @closed="destroyForm" :before-close="handleClose">
        <el-form :model="vehicle" ref="carForm" :rules="rules" label-position="left" label-width="120px" @submit.prevent>
            <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item prop="id" style="display: none">
                    <el-input v-model="vehicle.id"/>
                  </el-form-item>
                    <el-form-item label="车牌号:" prop="licensePlate" class="label-right-align">
                        <el-input v-model="vehicle.licensePlate" type="text" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="车辆名称:" prop="brand" class="label-right-align">
                        <el-input v-model="vehicle.brand" type="text" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="车辆价值:" prop="worth" class="label-right-align">
                        <el-input v-model="vehicle.worth" type="text" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                    <el-form-item label="当前状态:" prop="enabled" class="label-right-align">
                        <el-radio-group v-model="vehicle.enabled">
                            <el-radio v-for="(item, index) in enabledOptions" :key="index"
                                      :label="item.value"
                                      style="{display: inline}">{{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="grid-cell">
                    <el-form-item label="容纳人数:" prop="type" class="label-right-align">
                        <el-radio-group v-model="vehicle.type">
                            <el-radio v-for="(item, index) in typeOptions2" :key="index"
                                      :label="item.value"
                                      :disabled="item.disabled" style="{display: inline}">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
<!--            <el-row>-->
<!--              <el-col :span="24" class="grid-cell">-->
<!--                <el-form-item label="汽车图片:" prop="vehicleImg" class="label-right-align">-->
<!--                  <el-upload-->
<!--                      class="avatar-uploader"-->
<!--                      :show-file-list="false"-->
<!--                      :headers="config"-->
<!--                      ref="uploadRef"-->
<!--                      action="https://localhost:8001/vehicle/insert_img"-->
<!--                      :on-change="handleAvatarSuccess"-->
<!--                      :on-success="handle_success"-->
<!--                      :auto-upload="false">-->
<!--                    <img v-if="dialogImageUrlShow"  class="avatar"/>-->
<!--                      <el-icon v-else class="avatar-uploader-icon">-->
<!--                        <Plus />-->
<!--                      </el-icon>-->

<!--                  </el-upload>-->
<!--                  <el-button @click="submit">上传</el-button>-->
<!--                </el-form-item>-->

<!--              </el-col>-->
<!--            </el-row>-->
        </el-form>
        <template #footer>
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="addVehicle" v-if="type===0">确定新增</el-button>
            <el-button type="primary" @click="updateVehicle" v-if="type===1">确定修改</el-button>
        </template>
    </el-dialog>
</template>

<script lang="ts" >
import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import {addCar, updatevehicle} from "../../../../../network/adm/vehicle";
import {ElMessage, ElMessageBox} from "element-plus";
import type { UploadFile,UploadInstance } from 'element-plus';
export default {
    name: "VehicleBasicInfoForm",
    emits:['refresh-data'],
    setup(props, {emit}) {
        const dialogVisible = ref(false)
        let globalProperties = getCurrentInstance()?.appContext.config.globalProperties;
        const carForm = ref(null);
        const form = reactive({
            vehicle: {
                id: null,
                licensePlate: null,
                brand: null,
                createTime: null,
                worth: null,
                type: null,
                enabled: null,
                vehicleImg:null
            },
            rules:{
                licensePlate: [
                    {required: true,message: '请输入汽车拍照',trigger: 'blur'}
                ],
                brand: [
                    {required: true,message: '请输入汽车品牌',trigger: 'blur'}
                ],
                worth: [
                    {required: true,message: '请输入汽车价值',trigger: 'blur'}
                ],
                type: [
                    {required: true,message: '请选择汽车类型',trigger: 'blur'}
                ],
                enabled: [
                    {required: true,message: '请选择汽车状态',trigger: 'blur'}
                ],
            },
          setVehicle({id,licensePlate, brand,worth , type, enabled,vehicleImg}){
            this.vehicle.id = id;
            this.vehicle.licensePlate = licensePlate;
            this.vehicle.brand = brand;
            this.vehicle.worth = worth;
            this.vehicle.type = type;
            this.vehicle.enabled = enabled;
            this.vehicle.vehicleImg=vehicleImg;
          },
            destroyForm() {
                carForm.value.resetFields();
                carForm.value.clearValidate();
            },
            updateVehicle() {
                carForm.value.validate((valid)=>{
                    if(valid){
                        updatevehicle(form.vehicle).then(vo => {
                            globalProperties.$response.handle({
                                data: vo,
                                success: '修改成功',
                                error: '修改失败',
                                successFn: () => {
                                    emit('refresh-data');
                                    dialogVisible.value = false;
                                }
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单');
                    }
                })
            },
            addVehicle() {
                carForm.value.validate((valid)=>{
                    if(valid){
                      addCar(form.vehicle).then(vo => {
                            globalProperties.$response.handle({
                                data: vo,
                                success: '新增成功',
                                error: '新增失败',
                                successFn: () => {
                                    emit('refresh-data');
                                    dialogVisible.value = false;
                                }
                            })
                        })
                    }else{
                        ElMessage.error('请先完善表单');
                    }
                })
            },
        })
        const executeFn = reactive({
            handleClose: () => {
                globalProperties.$operate.confirm({
                    hint: '你确认要关闭当前编辑吗？',
                    title: '退出编辑',
                    executeFn() {
                        dialogVisible.value = false
                    }
                })
            }
        })

      const img = reactive({
        dialogImageUrlShow:false,
        imgUrlBase64:""
      })
      const uploadRef = ref<UploadInstance>()
      // 图片上传
      const handleAvatarSuccess = (uploadFile) => {
        img.dialogImageUrlShow = true;
        // @ts-ignore
        img.imgUrlBase64 = URL.createObjectURL(uploadFile.raw!);

      }

      const submit = ()=>{
          uploadRef.value.submit();
      }
      const handle_success = (res) =>{
          console.log(res,"--------")
      }

        return {
          dialogVisible,
          carForm,
          handleAvatarSuccess,
          handle_success,
          uploadRef,submit,
          ...toRefs(form),
          ...toRefs(executeFn),
          ...toRefs(img)
        }
    },
    data() {
        return {
          token: "",
          fileList: [],
            type: 0,
            typeOptions2: [{
                "label": "2人",
                "value": 2
            }, {
                "label": "4人",
                "value": 4
            }, {
                "label": "5人",
                "value": 5
            }, {
                "label": "10人",
                "value": 10

            }],
            enabledOptions: [{
                "label": "启用",
                "value": 0
            }, {
                "label": "不启用",
                "value": 1
            }],
        }
    },
  computed: {
    config() {
      return { token: this.token };
    },
  },
  mounted() {
    this.token = window.sessionStorage.getItem("tokenStr");
  },



  methods: {
    }
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>